<template>
	<view class="container box">
		<view class="title inner-center">
			登录
		</view>
		<view class="input-data">
			<view class="preTxt">
				{{phoneType?loginType[0].label:loginType[1].label}}
			</view>
			<input v-if="phoneType" type="number" placeholder-class="placeholder-class" @blur="checkPhone"
				v-model.trim="formData.phone" :placeholder="'请输入'+ loginType[0].txt" />
			<input v-else type="text" placeholder-class="placeholder-class" @blur="checkEmail"
				v-model.trim="formData.email" :placeholder="'请输入'+loginType[1].txt" />
		</view>
		<view class="input-data">
			<input v-model.trim="formData.pwd" @blur="checkPwd" :type="pwdType?'password':'text'"
				placeholder-class="placeholder-class" placeholder="请输入密码" />
			<uni-icons v-if="formData.pwd" :type="pwdType?'eye-slash':'eye'" size="25" color="white"
				@click="pwdType=!pwdType"></uni-icons>
		</view>
		<view class="input-data">
			<input v-model.trim="formData.repwd" @blur="checkRePwd" :type="repwdType?'password':'text'"
				placeholder-class="placeholder-class" placeholder="请输入确认密码" />
			<uni-icons v-if="formData.repwd" :type="repwdType?'eye-slash':'eye'" size="25" color="white"
				@click="repwdType=!repwdType"></uni-icons>
		</view>
		<view class="btn-login absolute">
			<button @click="LoginFn">登录</button>
		</view>
		<view class="register absolute" @click="$go2Page('register')">
			注册
		</view>
		<view class="email-login absolute">
			<uni-icons :type="phoneType?'email':'phone'" size="30" color="white"
				@click="phoneType=!phoneType;clear()"></uni-icons>
		</view>
	</view>
</template>

<script>
	import {
		phoneVerify,
		emialVerify,
		pwdVerify
	} from '../../util/verify.js'
	import {
		acquireData,
		check
	} from '../../database/index.js'
	const db = uniCloud.database()
	export default {
		data() {
			return {
				phoneType: true,
				loginType: [{
					label: "+86",
					txt: '手机号'
				}, {
					label: "email",
					txt: '邮箱'
				}],
				pwdType: true,
				repwdType: true,
				formData: {
					phone: '',
					email: '',
					pwd: '',
					repwd: ''
				},
			}
		},
		methods: {
			clear() {
				this.formData = {
					phone: '',
					email: '',
					pwd: '',
					repwd: ''
				}
			},
			checkPhone() {
				let res, msg;
				[res, msg] = phoneVerify(this.formData.phone)
				if (!res) {
					this.$showMsg(msg)
				}
				return res
			},
			checkEmail() {
				let res, msg;
				[res, msg] = emialVerify(this.formData.email)
				if (!res) {
					this.$showMsg(msg)
				}
				return res
			},
			checkPwd() {
				let res, msg;
				[res, msg] = pwdVerify(this.formData.pwd)
				if (!res) {
					this.$showMsg(msg)
				}
				return res
			},
			checkRePwd() {
				let res, msg;
				[res, msg] = pwdVerify(this.formData.repwd)
				if (!res) {
					this.$showMsg(msg)
				}
				if (!res) {
					return res
				}
				if (this.formData.pwd != this.formData.repwd) {
					this.$showMsg('前后密码不一致')
					return false
				}
				return true
			},
			async LoginFn() {
				if (this.phoneType && this.checkPhone() && this.checkPwd() && this.checkRePwd()) {
					let [isuser, usermsg] = await check('user', [{
						user_account: this.formData.phone,
						user_pwd: this.formData.pwd,
					}])
					if (isuser) {
						this.$showMsg('账号或密码错误')
						return
					}
					let [isuse, usemsg] = await check('user', [{
						user_account: this.formData.phone,
						user_pwd: this.formData.pwd,
						user_status: 0
					}])
					if (isuse) {
						this.$showMsg('用户被禁用，请联系管理员')
						return
					} else {
						let user = await acquireData('user', {
							user_account: this.formData.phone
						})
						this.clear()
						this.$showMsg('登录成功')
						this.$store.commit('setUser', user[0])
						this.$go2Page('index')
					}
				}
				if (!this.phoneType && this.checkEmail() && this.checkPwd() && this.checkRePwd()) {
					let [isuser, usermsg] = await check('user', [{
						user_email: this.formData.email,
						user_pwd: this.formData.pwd,
					}])
					if (isuser) {
						this.$showMsg('账号或密码错误')
						return
					}
					let [isuse, usemsg] = await check('user', [{
						user_email: this.formData.email,
						user_pwd: this.formData.pwd,
						user_status: 0
					}])
					if (isuse) {
						await this.$showMsg('用户被禁用，请联系管理员')
						return
					} else {
						let user = await acquireData('user', {
							user_email: this.formData.email,
						})
						this.clear()
						this.$showMsg('登录成功')
						this.$store.commit('setUser', user[0])
						this.$go2Page('index')
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	.box {
		position: relative;
		padding: 30rpx 70rpx;
		padding-top: 0;
		background: linear-gradient(#483d8b, #7B68EE);

		.title {
			font-size: 1.5rem;
			letter-spacing: 0.2rem;
			margin-bottom: 80rpx;
		}


		.btn-login {
			button {
				border-radius: 40rpx;
				width: 400rpx;
				color: white;
				background-color: #483d8b;
			}

			top: 500rpx;
		}
	}

	.register {
		text-align: right;
		color: #fff9ff;
		top: 650rpx;
		letter-spacing: 0.1rem;
	}

	.email-login {
		text-align: center;
		bottom: 180rpx;
	}

	.absolute {
		width: calc(100% - 140rpx);
		position: absolute;
	}

	.input-data {
		display: flex;
		background-color: rgba(255, 255, 255, .3);
		border-radius: 40rpx;
		padding: 20rpx 40rpx;
		margin-bottom: 30rpx;

		.preTxt {
			margin-right: 40rpx;
		}

		.placeholder-class {
			color: rgba(255, 255, 255, .3);
		}
	}
</style>